<template>
  <div>
    <div class="zan-panel" v-for="(item,index) in giftCardRecords" :key="index">
      <div class="cell field">
        <div class="field__title">礼品</div>
          <div class="field__input cell__bd">
            <div v-for="(coupon,couponIndex) in item.give_coupons" :key="couponIndex">
              {{coupon.name}}  {{coupon.num}}张
            </div>
         </div>
      </div>
      <div class="cell field" style="color:black;">
        <div class="field__title">赠送人</div>
        <div class="field__input cell__bd">{{item.user_name}}</div>
      </div>
      <div class="cell field" style="color:black;">
        <div class="field__title">领取时间</div>
        <div class="field__input cell__bd">{{item.updated}}</div>
      </div>
      <div class="cell field">
        <div class="field__input zan-cell__ft">礼品可在我的优惠券中查看</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import {formatTime} from '@/utils/index'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      giftCardRecords:[],
      page:1
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    seeitemDetail(item){
      wx.navigateTo({url: '/pages/user/gift_card/gift_card_detail?gift_card_id='+item.activity_id})
    },
  },
  async mounted () {
    let result = await api.receiveGiftRecord({receive_user_id:this.user.id,status:'received'})
    if (result.code == 0) {
      result.data.forEach(item=>{
        item.updated = formatTime(item.updated)
      })
      this.giftCardRecords = result.data
    }
  }
}
</script>

<style >
page{
  background: #F2F2F2;
}
.cell{
  position:relative;
  padding:5px;
  display:flex;
  align-items:center;
  line-height:1.4;
  font-size:15px;
}
.cell::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:190%;
  height:200%;
  transform:scale(.5);
  transform-origin:0 0;
  pointer-events:none;
  box-sizing:bitem-box;
  bitem:0 solid #e5e5e5;
  bitem-bottom-width:1px;
  left:15px;right:0
}
.field{
  padding:3px 15px;
  color:#333;
  background: white;
}
.field__title{
  color:#333;
  min-width:65px;
  padding-right:20px;
}
.field__input{
  flex:1;
  line-height:1.6;
  padding:4px 0;
  min-height:22px;
  height:auto;
  font-size:15px;
}
.cell__bd{
  flex:1;
}
.cart-list-box{
  background:#FFFFFF;
  display:flex;
  font-size:15px;
  height: 60px;
  bitem:0 solid #e5e5e5;
  bitem-bottom-width:1px;
}
.list-info{
  width:60%;
  padding:5px 12px;
}
.list-info-size{
  padding-top: 10px;
  color:#B1B1B1;
}
</style>
